<template>
  <div class="community-page">
    <!-- 暂未开放提示 -->
    <div class="coming-soon-banner">
      <div class="banner-content">
        <div class="banner-icon">🚧</div>
        <div class="banner-text">
          <h2>功能暂未开放</h2>
          <p>学习社区功能正在紧张开发中，敬请期待！</p>
        </div>
      </div>
    </div>

    <div class="page-header">
      <h1 class="page-title">👥 学习社区</h1>
      <p class="page-subtitle">分享知识，共同进步</p>
    </div>

    <div class="community-content">
      <!-- 社区概览 -->
      <div class="community-overview">
        <div class="overview-card">
          <div class="card-icon">👥</div>
          <div class="card-content">
            <h3>活跃用户</h3>
            <p class="card-number">{{ activeUsers }}</p>
            <p class="card-desc">今日在线学习</p>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">📝</div>
          <div class="card-content">
            <h3>学习笔记</h3>
            <p class="card-number">{{ notesCount }}</p>
            <p class="card-desc">共享笔记总数</p>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">📚</div>
          <div class="card-content">
            <h3>学习资料</h3>
            <p class="card-number">{{ resourcesCount }}</p>
            <p class="card-desc">可下载资料</p>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">👨‍👩‍👧‍👦</div>
          <div class="card-content">
            <h3>学习小组</h3>
            <p class="card-number">{{ groupsCount }}</p>
            <p class="card-desc">活跃学习小组</p>
          </div>
        </div>
      </div>

      <!-- 功能区域 -->
      <div class="community-sections">
        <!-- 学习笔记 -->
        <div class="community-section">
          <div class="section-header">
            <h2>📝 学习笔记</h2>
            <el-button type="primary" @click="createNote">
              <span class="btn-icon">✏️</span>
              写笔记
            </el-button>
          </div>
          <div class="section-content">
            <div class="notes-filter">
              <el-select v-model="noteFilter" placeholder="选择分类" size="small">
                <el-option label="全部" value="all"></el-option>
                <el-option label="算法" value="algorithm"></el-option>
                <el-option label="网络" value="network"></el-option>
                <el-option label="数据库" value="database"></el-option>
              </el-select>
              <el-input
                v-model="noteSearch"
                placeholder="搜索笔记..."
                size="small"
                prefix-icon="el-icon-search"
                style="width: 200px;"
              ></el-input>
            </div>
            
            <div class="notes-list">
              <div 
                v-for="note in filteredNotes" 
                :key="note.id"
                class="note-item"
                @click="viewNote(note)"
              >
                <div class="note-header">
                  <div class="note-author">
                    <img :src="note.avatar" :alt="note.author" class="author-avatar">
                    <span class="author-name">{{ note.author }}</span>
                  </div>
                  <span class="note-time">{{ note.time }}</span>
                </div>
                <h3 class="note-title">{{ note.title }}</h3>
                <p class="note-summary">{{ note.summary }}</p>
                <div class="note-tags">
                  <span 
                    v-for="tag in note.tags" 
                    :key="tag"
                    class="note-tag"
                  >
                    {{ tag }}
                  </span>
                </div>
                <div class="note-stats">
                  <span class="stat-item">
                    <span class="stat-icon">👁️</span>
                    {{ note.views }}
                  </span>
                  <span class="stat-item">
                    <span class="stat-icon">👍</span>
                    {{ note.likes }}
                  </span>
                  <span class="stat-item">
                    <span class="stat-icon">💬</span>
                    {{ note.comments }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习资料 -->
        <div class="community-section">
          <div class="section-header">
            <h2>📚 学习资料</h2>
            <el-button type="success" @click="uploadResource">
              <span class="btn-icon">📤</span>
              上传资料
            </el-button>
          </div>
          <div class="section-content">
            <div class="resources-grid">
              <div 
                v-for="resource in resources" 
                :key="resource.id"
                class="resource-item"
                @click="downloadResource(resource)"
              >
                <div class="resource-icon">
                  <span class="file-icon">{{ resource.icon }}</span>
                </div>
                <div class="resource-info">
                  <h3 class="resource-title">{{ resource.title }}</h3>
                  <p class="resource-desc">{{ resource.description }}</p>
                  <div class="resource-meta">
                    <span class="resource-size">{{ resource.size }}</span>
                    <span class="resource-downloads">{{ resource.downloads }} 次下载</span>
                  </div>
                </div>
                <div class="resource-action">
                  <el-button type="primary" size="small">
                    <span class="btn-icon">⬇️</span>
                    下载
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习小组 -->
        <div class="community-section">
          <div class="section-header">
            <h2>👨‍👩‍👧‍👦 学习小组</h2>
            <el-button type="warning" @click="createGroup">
              <span class="btn-icon">➕</span>
              创建小组
            </el-button>
          </div>
          <div class="section-content">
            <div class="groups-grid">
              <div 
                v-for="group in groups" 
                :key="group.id"
                class="group-item"
                @click="joinGroup(group)"
              >
                <div class="group-header">
                  <div class="group-avatar">
                    <span class="group-icon">{{ group.icon }}</span>
                  </div>
                  <div class="group-info">
                    <h3 class="group-name">{{ group.name }}</h3>
                    <p class="group-desc">{{ group.description }}</p>
                  </div>
                </div>
                <div class="group-stats">
                  <span class="group-members">{{ group.members }} 成员</span>
                  <span class="group-topics">{{ group.topics }} 话题</span>
                </div>
                <div class="group-tags">
                  <span 
                    v-for="tag in group.tags" 
                    :key="tag"
                    class="group-tag"
                  >
                    {{ tag }}
                  </span>
                </div>
                <div class="group-action">
                  <el-button 
                    :type="group.joined ? 'info' : 'primary'"
                    size="small"
                  >
                    {{ group.joined ? '已加入' : '加入小组' }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserCommunity',
  data() {
    return {
      activeUsers: 1234,
      notesCount: 567,
      resourcesCount: 89,
      groupsCount: 23,
      noteFilter: 'all',
      noteSearch: '',
      notes: [
        {
          id: 1,
          title: '快速排序算法详解',
          summary: '详细介绍了快速排序的原理、实现和优化技巧，包含多个实际应用案例...',
          author: '算法达人',
          avatar: 'https://via.placeholder.com/40',
          time: '2小时前',
          tags: ['算法', '排序'],
          views: 156,
          likes: 23,
          comments: 8
        },
        {
          id: 2,
          title: 'TCP/IP协议栈深度解析',
          summary: '从底层原理到实际应用，全面解析TCP/IP协议栈的工作机制...',
          author: '网络专家',
          avatar: 'https://via.placeholder.com/40',
          time: '1天前',
          tags: ['网络', '协议'],
          views: 89,
          likes: 15,
          comments: 5
        },
        {
          id: 3,
          title: '数据库索引优化实践',
          summary: '分享在实际项目中数据库索引优化的经验和技巧...',
          author: 'DBA小能手',
          avatar: 'https://via.placeholder.com/40',
          time: '3天前',
          tags: ['数据库', '优化'],
          views: 234,
          likes: 45,
          comments: 12
        }
      ],
      resources: [
        {
          id: 1,
          title: '算法导论中文版',
          description: '经典算法教材，包含详细的算法分析和实现',
          icon: '📖',
          size: '15.2MB',
          downloads: 1234
        },
        {
          id: 2,
          title: '计算机网络实验指导',
          description: '网络协议实验的详细指导文档',
          icon: '🌐',
          size: '8.7MB',
          downloads: 567
        },
        {
          id: 3,
          title: 'SQL性能优化手册',
          description: '数据库查询优化的实用指南',
          icon: '🗄️',
          size: '12.1MB',
          downloads: 890
        }
      ],
      groups: [
        {
          id: 1,
          name: '算法学习小组',
          description: '专注于算法学习和刷题，每周分享解题思路',
          icon: '🧮',
          members: 156,
          topics: 45,
          tags: ['算法', '刷题'],
          joined: true
        },
        {
          id: 2,
          name: '网络技术交流',
          description: '网络协议、网络安全技术交流平台',
          icon: '🌐',
          members: 89,
          topics: 23,
          tags: ['网络', '安全'],
          joined: false
        },
        {
          id: 3,
          name: '数据库优化群',
          description: '数据库设计、优化、运维经验分享',
          icon: '🗄️',
          members: 234,
          topics: 67,
          tags: ['数据库', '优化'],
          joined: false
        }
      ]
    }
  },
  computed: {
    filteredNotes() {
      let filtered = this.notes
      
      if (this.noteFilter !== 'all') {
        filtered = filtered.filter(note => 
          note.tags.some(tag => tag.toLowerCase().includes(this.noteFilter))
        )
      }
      
      if (this.noteSearch) {
        filtered = filtered.filter(note =>
          note.title.toLowerCase().includes(this.noteSearch.toLowerCase()) ||
          note.summary.toLowerCase().includes(this.noteSearch.toLowerCase())
        )
      }
      
      return filtered
    }
  },
  methods: {
    createNote() {
      this.$message.info('创建新笔记')
    },
    viewNote(note) {
      this.$message.info(`查看笔记: ${note.title}`)
    },
    uploadResource() {
      this.$message.info('上传学习资料')
    },
    downloadResource(resource) {
      this.$message.success(`开始下载: ${resource.title}`)
    },
    createGroup() {
      this.$message.info('创建学习小组')
    },
    joinGroup(group) {
      if (!group.joined) {
        this.$message.success(`已加入小组: ${group.name}`)
        group.joined = true
      } else {
        this.$message.info(`您已经是 ${group.name} 的成员`)
      }
    }
  }
}
</script>

<style scoped>
.community-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 暂未开放横幅 */
.coming-soon-banner {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: white;
  padding: 30px;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
  animation: pulse 2s infinite;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.banner-icon {
  font-size: 3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.banner-text h2 {
  margin: 0 0 8px 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.banner-text p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
}

/* 社区概览 */
.community-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.overview-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.card-content h3 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 600;
}

.card-number {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.card-desc {
  margin: 0;
  opacity: 0.9;
  font-size: 0.85rem;
}

/* 功能区域 */
.community-sections {
  display: grid;
  gap: 30px;
}

.community-section {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #2c3e50;
}

.btn-icon {
  margin-right: 5px;
}

/* 学习笔记 */
.notes-filter {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.notes-list {
  display: grid;
  gap: 15px;
}

.note-item {
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.note-item:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.note-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.author-name {
  font-weight: 600;
  color: #2c3e50;
}

.note-time {
  font-size: 0.85rem;
  color: #7f8c8d;
}

.note-title {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  color: #2c3e50;
}

.note-summary {
  margin: 0 0 12px 0;
  color: #7f8c8d;
  line-height: 1.5;
}

.note-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.note-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.note-stats {
  display: flex;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.stat-icon {
  font-size: 0.9rem;
}

/* 学习资料 */
.resources-grid {
  display: grid;
  gap: 15px;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.resource-item:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
}

.resource-icon {
  font-size: 2rem;
  width: 60px;
  text-align: center;
}

.resource-info {
  flex: 1;
}

.resource-title {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: #2c3e50;
}

.resource-desc {
  margin: 0 0 8px 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.resource-meta {
  display: flex;
  gap: 15px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.resource-action {
  flex-shrink: 0;
}

/* 学习小组 */
.groups-grid {
  display: grid;
  gap: 20px;
}

.group-item {
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.group-item:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
}

.group-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.group-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.group-name {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  color: #2c3e50;
}

.group-desc {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.group-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.group-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.group-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.group-action {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .community-page {
    padding: 15px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .community-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .notes-filter {
    flex-direction: column;
  }
  
  .resource-item {
    flex-direction: column;
    text-align: center;
  }
  
  .group-header {
    flex-direction: column;
    text-align: center;
  }
  
  .group-action {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .community-overview {
    grid-template-columns: 1fr;
  }
  
  .note-stats {
    flex-direction: column;
    gap: 8px;
  }
  
  .resource-meta {
    flex-direction: column;
    gap: 5px;
  }
  
  .group-stats {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
